<template>
	<view class="messageDetails">
		<view class="authorInfo">
			<view class="title">
				{{title}}
			</view>
			<view class="detailsInfo">
				<view class="read">
					阅读：{{read}}
				</view>
				<view class="author">
					作者：{{author}}
				</view>
			</view>
		</view>
		<u-parse :lazyLoad="true" :content="content" :tagStyle="style"></u-parse>
		<u-back-top :scroll-top="scrollTop" :mode="mode" :iconStyle="iconStyle" :duration="duration"></u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				title: '',
				author: '',
				read: '',
				wh: "",
				style: {
					// 字符串的形式
					p: 'margin-bottom: 20rpx; color: #636c71',
					// img: `max-width: 100%; height:auto`
				},
				scrollTop: 80,
				mode: 'square',
				iconStyle: {
					fontSize: '32rpx',
					color: '#2979ff'
				},
				duration: 300
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.getHelpDetailsById(option.id)
			const sysInfo = uni.getSystemInfoSync()
			this.wh = sysInfo.windowWidth
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			async getHelpDetailsById(id) {
				const result = await uni.$http.get('/v1/knowledgebase/' + id)
				console.log(result)
				if (result.data.status !== 200) return uni.$showMsg()
				this.content = result.data.data.content
				this.title = result.data.data.title
				this.author = result.data.data.author
				this.read = result.data.data.read

				this.content = this.content.replace('<html>', '')
				this.content = this.content.replace('</html>', '')
				this.content = this.content.replace('<head>', '')
				this.content = this.content.replace('</head>', '')
				this.content = this.content.replace('<body>', '')
				this.content = this.content.replace('</body>', '')
				this.content = this.content.replace('<!DOCTYPE html>', '')
				this.content = this.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
				console.log(this.content)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.messageDetails {
		min-height: 100vh;
		padding: 15rpx 30rpx;
		box-sizing: border-box;
	}

	.authorInfo {
		width: 100%;
		height: 185rpx;
	}

	.title {
		text-align: center;
		width: 100%;
		height: 35rxp;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 50rpx;
		font-weight: 700;

	}

	.detailsInfo {
		width: 100%;
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		color: #969799;
	}
</style>
